<template>
  <div class="category-manager wap">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}"><span>分类管理</span>
      <div class="overwrite-title-right" slot="right" @click="addCategory">新增分类</div>
    </x-header>

    <div class="content main">
      <scroller
        ref="scroll"
        :on-refresh="refresh"
      >
        <div class="item vux-1px-b" v-for="(item,index) in categoryList">
          <div>
            <div  @touchstart="showDeleteButton(item,index)" @touchend="clearLoop(item)" class="header display-flex justify-content-flex-justify align-items-center">
              <div class="header-content flex-1 beyond-one">
                <span
                      class="customer-type-name beyond-one"
                      v-if="item.Flagtype==1">{{item.name}}<span>{{item.customerCount}}</span></span>
                <div v-if="item.Flagtype==2" class="display-flex">
                  <input  class="normal-input flex-1 add-input" :max="20" v-model="item.name" :show-clear="false" placeholder="请输入分类名称"/>
                  <span class="add-category display-flex  align-items-center" @click="categoryEdit(item)">确定</span>
                </div>
              </div>
              <div>
                <span v-if="item.Flagtype==1" class="add-customer" @click="addCustomer(item)">
                  新增商户 <x-icon size="20" type="ios-plus-empty" class="icon-gray"></x-icon></span>
                <span v-if="item.Flagtype==1" class="expand" @click="expandList(item,index)">
            {{item.expand?'收起':'展开'}}
            <x-icon size="15" v-if="item.expand" type="ios-arrow-up" class="icon-blue"></x-icon>
            <x-icon size="15" v-if="!item.expand" type="ios-arrow-down" class="icon-blue"></x-icon>
          </span>
          </div>
            </div>
            <customerItem  v-if="item.expand&&item.customers" @dialogComfrim="dialogComfrim"
                          :checkListArray="checkListArray" :list="item.customers"></customerItem>
            <div v-if="item.expand&&item.customers&&item.customers.length>=5" @click="showMore(item)"
                 class="more display-flex justify-content-flex-center align-items-center"><span>进入分类,查看更多</span>
              <x-icon type="ios-arrow-right" size="15"></x-icon>
            </div>

          </div>

        </div>
        <!--<no-data v-show="loadOk" @refreshData="refresh(0)" :list="categoryList"></no-data>-->
        <div v-show="loadOk" v-if="categoryList.length==0" style="text-align: center;color:#999;margin-top: .2rem;" >暂无分类</div>

      </scroller>

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import customerItem from '../../components/customer-manager-item.vue'

  export default {
    components: {
      customerItem
    },
    data() {
      return {
        categoryList: [],
        checkListArray: [],
        lastSelectIndex: {index: -1, id: ''},
        categoryName: '',
        test: "",
        loadOk:false,
        hasAdd:false,
        submitOk:false
      }
    },
    created() {
      this.initData();
    },
    mounted() {
      window['androidCallJs'] = this.androidCallJs;
    },
    methods: {
      androidCallJs(val) {
        val= decodeURIComponent(val.replace(/\+/g, '%20'));
        let obj = this.$getJson(val);
        if (obj.code == 1002) {
          this.addCategory();
        }else if(obj.code==1017){
          this.initData(0);
        }
      },
      refresh() {
        this.lastSelectIndex={index: -1, id: ''};
        this.hasAdd=false;
        this.initData(0);
      },
      initData(type) {
        this.$ajax.get("customer/category/list", (res) => {
          console.log("----",res)
          type == 0 && this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
          if (res.code == 200) {
            this.categoryList = res.data;
            if (this.categoryList && this.categoryList.length > 0) {
              this.checkListArray = [];
              for (let i = 0; i < this.categoryList.length; i++) {
                this.categoryList[i].Flagtype = 1;
                this.checkListArray.push({key: this.categoryList[i].id, value: this.categoryList[i].name});
                if (this.categoryList[i].id == this.lastSelectIndex.id) {
                  this.categoryList[i].expand = true;
                } else {
                  this.categoryList[i].expand = false;
                }
              }
              if (this.lastSelectIndex.index > this.categoryList.length) {
                this.lastSelectIndex.index = -1;
              }
            }
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
          this.loadOk=true;
        }, {})
      },
      addCategory() {
        if(!this.hasAdd){
          this.hasAdd=true;
          let obj = {name: '', Flagtype: 2, customers: [], expand: false}
          this.categoryList.unshift(obj);
        }
      },
      categoryEdit(item) {
        if(this.submitOk){
           return;
        }
        this.submitOk=true;
        if(item.name.trim().length==0){
          this.submitOk=false;
          this.$vux.toast.text('请输入正确的分类', 'center')
        }else if(item.name.length>20){
          this.submitOk=false;
          this.$vux.toast.text('分类名称个数介于0~20之间', 'center')
        } else {
          this.$ajax.post("customer/category/create", {categoryName: item.name}, (res) => {
            console.log("====res", res);
            this.submitOk=false;
            if (res.code == 200) {
              this.hasAdd=false;
              this.initData();
            } else {
              this.$vux.toast.text(res.msg, 'center');
            }

          })
        }
      },
      addCustomer(item) {
        if (item.id) {
          if (this.$fromApp(this)) {
            this.$callJava({
              url: this.$webUrl + "add/customer?from=app&id=" + item.id + "&name=" + encodeURIComponent(item.name.toString().replace(/%/g,'~~pct~~')) + "&Authorization=" + this.$storage.get("token"),
              title: "新增商户",
              theme: 1
            })
          } else {
            this.$router.push({path: '/add/customer', query: {id: item.id, name: item.name.toString().replace(/%/g,'~~pct~~') }})
          }
        } else {
          this.$vux.toast.text('请先完成分类编辑', 'center')
        }
      },
      showMore(item) {
        if (this.$fromApp(this)) {
          this.$callJava({
            url: this.$webUrl + "category/zone?from=app&id=" + item.id + "&name=" + encodeURIComponent(item.name.toString().replace(/%/g,'~~pct~~')) + "&Authorization=" + this.$storage.get("token"),
            title: item.name
          })
        } else {
          this.$router.push({path: '/category/zone', query: {id: item.id, title: item.name.toString().replace(/%/g,'~~pct~~')}})
        }
      },
      expandList(item, index) {
        if (this.lastSelectIndex.index == -1) {
          this.lastSelectIndex.index = index;
          this.lastSelectIndex.id = item.id;
          item.expand = !item.expand;
          this.$set(this.categoryList, this.lastSelectIndex.index, item)
        } else {
          if (this.lastSelectIndex.index != index) {
            this.categoryList[this.lastSelectIndex.index].expand = false;
            this.$set(this.categoryList, this.lastSelectIndex.index, this.categoryList[this.lastSelectIndex.index])
            item.expand = !item.expand;
            this.lastSelectIndex.index = index;
            this.lastSelectIndex.id = item.id;
            this.$set(this.categoryList, index, item)
          } else {
            this.lastSelectIndex.index = index;
            this.lastSelectIndex.id = item.id;
            item.expand = !item.expand;
            this.$set(this.categoryList, this.lastSelectIndex.index, item)
          }
        }
      },
      dialogComfrim() {
        this.initData();
      },
      showDeleteButton(item, index) {
        clearTimeout(this.loop);
        const _this = this;
        this.loop = setTimeout(() => {
          this.$vux.confirm.show({
            title: '修改分类',
            value: true,
            "showInput": true,
            "inputAttrs":{
              maxlength:20
            },
            hideOnBlur:true,
            cancelText: '删除',
            // showCancelButton:false,
            onShow() {
              _this.$vux.confirm.setInputValue(item.name);
            },
            onCancel: () => {
              if (item.type == 9) {
                this.$ajax.post("customer/category/delete", {categoryId: item.id}, (res) => {
                  if (res.code == 200) {
                    this.$vux.toast.text('删除成功', 'center');
                    this.refresh()
                  } else {
                    this.$vux.toast.text(res.msg, 'center');
                  }
                })
              } else {
                this.$vux.toast.text("默认分类不能删除", 'center');
              }
            },
            onConfirm: (e) => {
              if (item.type == 9) {
                if(e.trim().length==0||e.trim().length>20){
                  this.$vux.toast.text('请输入正确的分类', 'center');
                  return;
                }
                this.$ajax.post("customer/category/update", {categoryId: item.id, categoryName: e}, (res) => {
                  if (res.code == 200) {
                    this.$vux.toast.text('修改成功', 'center');
                    item.name = e;
                    this.$set(this.categoryList, index, item)
                  } else {
                    this.$vux.toast.text(res.msg, 'center');
                  }
                })
              } else {
                this.$vux.toast.text("默认分类不能修改", 'center');
              }
            }
          })
        }, 1000);
      },
      clearLoop(item) {
        clearTimeout(this.loop);
      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .category-manager {
    background: #fff;
    .overwrite-title-right {
      color: #fff;
      font-size: 0.32rem;
    }
    .content {
      padding-bottom: 1rem;
    }
    .add-input{
      border:  1px solid #ddd;
      border-radius: 0.1rem;
      text-align: center;
      height: .7rem;
      font-size: .28rem;
    }
    .item {
      padding: 0.3rem .29rem 0rem .29rem;
      /deep/ .weui-cells {
        margin-top: 0rem !important;
      }
      /deep/ .weui-cell {
        padding: 0rem !important;
      }
      /deep/ .weui-input {
        border: 1px solid #ddd;
        padding: 0.1rem;
        border-radius: 0.1rem;
        font-size: .24rem;
        text-align: center;
        box-sizing: border-box;
        height: .6rem;
      }
      .add-category {
        background: #527DD9;
        border-radius: 0.06rem;
        color: #fff;
        padding: 0rem 0.12rem;
        font-size: .28rem;
        margin: 0rem 0.1rem 0 .2rem;
      }
      .header {
        padding-bottom: .35rem;
      }
      .header-content{
        margin-right: .1rem;
      }
      .customer-type-name {
        font-size: .34rem;
        font-weight: bold;
      }
      .add-customer {
        margin-right: .2rem;
      }
      .add-customer, .expand {
        height: .64rem;
        border: 1px solid #ddd;
        border-radius: .32rem;
        padding: .1rem .15rem .1rem .2rem;
      }
      .icon-gray, .icon-blue {
        fill: #999;
        vertical-align: middle;
        margin-top: -0.03rem;
      }
      .icon-blue {
        fill: #527DD9;
      }
      .more {
        padding: .2rem;
        span {
          color: #999;
          font-size: .24rem;
          margin-right: .1rem;
        }
        svg {
          fill: #ddd
        }
      }
    }

  }

</style>
